<!-- subpkg_consult/payment/index.vue -->
<script setup>
	import { ref } from 'vue'
	import { createPreOrderAPI, getPreOrderAPI, payAPI } from '@/apis/consult'
	import { useConsultStore } from '@/stores'
	import { getPatientDetailAPI } from '@/apis/user'
	// 保存预支付的信息
	const preOrderInfo = ref({})
	// 获取组件实例
	const paymentRef = ref(null)

	const store = useConsultStore()
	// 获取预支付的信息
	const getPreOrder = async () => {
		uni.showLoading({
			title: '正在加载中'
		})
		const res = await getPreOrderAPI(store.consult.type)
		uni.hideLoading()
		// console.log(res)
		preOrderInfo.value = res.data
	}
	const patientInfo = ref({})
	const getPatientDetail = async () => {
		const res = await getPatientDetailAPI(store.consult.patientId)
		// console.log(res.data)
		patientInfo.value = res.data
	}

	getPreOrder()
	getPatientDetail()

	// 生成订单id
	const isLoading = ref(false)
	// 保存订单id
	const orderId = ref('')
	const onCreatePreOrder = async () => {
		if (orderId.value !== '') {
			return uni.showToast({
				icon: 'none',
				title: '订单不能重复创建!'
			})
		}
		isLoading.value = true
		// 处理pictures数据
		if (store.consult.pictures.length) {
			store.consult.pictures = store.consult.pictures.map((item) => ({
				id: item.uuid,
				url: item.url
			}))
		}
		const res = await createPreOrderAPI({
			...store.consult
		})
		orderId.value = res.data.id
		// 将pinia里面的 数据清空
		store.clearConsult()
		// 显示支付页面
		paymentRef.value.popupOpen()

		isLoading.value = false
	}

	// 用户点击关闭时
	const onClose = async () => {
		// 提示用户
		const res = await uni.showModal({
			title: '关闭支付',
			content: '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭？',
			cancelText: '仍要关闭',
			cancelColor: '#848484',
			confirmText: '继续支付',
			confirmColor: '#16C2A3'
		})
		
		// console.log(res, 11111)
		if (!res.confirm) {
			paymentRef.value.popupClose()
		}
	}
	
	const paymentMethod = ref(1)
	
	// 保存付款方式
	const onChoosePayment = (val) => {
		paymentMethod.value = val.paymentMethod
	}
	
	// 开启付款
	const onConfirm = async () => {
		const res = await payAPI({
			paymentMethod: paymentMethod.value,
			orderId: orderId.value,
			payCallback: 'http://localhost:5174/#/subpkg_consult/room/index'
		})
		 window.location.href = res.data.payUrl
	}
</script>

<template>
	<scroll-page>
		<view class="payment-page" v-if="preOrderInfo && patientInfo">
			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				v-if="preOrderInfo.payment"
				:title="`图文问诊 ${preOrderInfo.payment || 0}元`"
			>
				<uni-list :border="false">
					<uni-list-item
						title="极速问诊"
						note="自动分配医生"
						thumb="/static/uploads/doctor-avatar.jpg"
						thumb-size="lg"
					/>
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item title="积分抵扣">
						<template #footer>
							<view class="uni-list-text-red">
								-¥{{ preOrderInfo.pointDeduction }}
							</view>
						</template>
					</uni-list-item>
					<uni-list-item title="实付款">
						<template #footer>
							<view class="uni-list-text-red">
								¥{{ preOrderInfo.actualPayment }}
							</view>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>

			<view class="dividing-line"></view>

			<uni-section
				title-font-size="32rpx"
				title-color="#121826"
				padding="30rpx"
				title="患者资料"
			>
				<uni-list :border="false">
					<uni-list-item title="患者信息">
						<template #footer>
							<view class="uni-list-text-gray">
								{{ patientInfo.name }} | {{ patientInfo.genderValue }} |
								{{ patientInfo.age }}岁
							</view>
						</template>
					</uni-list-item>
					<uni-list-item
						border
						title="病情描述"
						:note="store.consult.illnessDesc"
					/>
				</uni-list>
			</uni-section>

			<!-- <view class="payment-agreement">
        <radio color="#20c6b2" value="1" />
        我已同意<text style="color: #20c6b2">支付协议</text>
      </view> -->
		</view>
		<!-- 下一步操作 -->
		<view class="next-step">
			<view class="total-amount">
				合计: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
			</view>
			<button :loading="isLoading" class="uni-button" @click="onCreatePreOrder">
				立即支付
			</button>
		</view>
	</scroll-page>

	<!-- 支付订单组件 -->
	<custom-payment
		ref="paymentRef"
		:orderId="orderId"
		:amount="preOrderInfo.actualPayment"
		@close="onClose"
		@confirm="onConfirm"
		@choosePayment="onChoosePayment"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
